<template>
  <div class="bg-gray-50 min-h-screen">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-sm sticky top-0 z-50">
      <div class="container mx-auto px-4 py-3 flex items-center justify-between">
        <div class="text-xl font-bold text-gray-800">人才库</div>
        <nav class="flex items-center space-x-6">
          <a href="#" class="text-gray-600 hover:text-primary text-sm whitespace-nowrap">招聘规范</a>
          <router-link to="/resume" class="text-gray-600 hover:text-primary text-sm whitespace-nowrap">我的简历</router-link>
          <a href="#" class="text-gray-600 hover:text-primary text-sm whitespace-nowrap">面试</a>
          <a href="#" class="text-gray-600 hover:text-primary text-sm whitespace-nowrap">招聘数据</a>
          <a href="#" class="text-gray-600 hover:text-primary text-sm whitespace-nowrap">账号权限</a>
          <a href="#" class="text-primary border border-primary px-3 py-1 rounded text-sm whitespace-nowrap">升级VIP</a>
          <div class="flex items-center space-x-1">
            <span class="text-gray-600 text-sm">{{ authStore.user?.name }}</span>
            <div class="w-8 h-8 rounded-full bg-gray-200 overflow-hidden">
              <img :src="authStore.user?.avatar" :alt="authStore.user?.name" class="w-full h-full object-cover">
            </div>
          </div>
        </nav>
      </div>
    </header>

    <!-- 搜索区域 -->
    <div class="bg-white border-b border-gray-200 py-4">
      <div class="container mx-auto px-4">
        <div class="flex items-stretch">
          <!-- 地区选择 -->
          <div class="relative border border-gray-300 rounded-l">
            <select v-model="selectedLocation" class="px-4 py-2 w-32 text-gray-700 bg-white focus:outline-none rounded appearance-none">
              <option value="">全部地区</option>
              <option value="上海">上海</option>
              <option value="北京">北京</option>
              <option value="深圳">深圳</option>
              <option value="广州">广州</option>
            </select>
          </div>
          
          <!-- AI智能筛选 -->
          <div class="relative border-t border-b border-gray-300">
            <button class="flex items-center justify-between px-4 py-2 w-40 text-gray-700 bg-white focus:outline-none">
              <span>AI智能筛选</span>
              <i class="ri-arrow-down-s-line"></i>
            </button>
          </div>
          
          <!-- 搜索框 -->
          <div class="flex-1 relative">
            <input 
              v-model="searchQuery"
              type="text" 
              placeholder="搜索公司、行业、学校、技能等" 
              class="w-full h-full px-4 py-2 border border-gray-300 rounded-r border-l-0 text-sm focus:outline-none focus:border-primary"
            >
          </div>
          
          <!-- 搜索按钮 -->
          <button 
            @click="performSearch"
            class="bg-primary text-white px-6 py-2 rounded ml-2 flex items-center justify-center"
          >
            <i class="ri-search-line mr-1"></i>
            <span>搜索</span>
          </button>
        </div>
        
        <!-- 热门搜索标签 -->
        <div class="mt-3 flex items-center flex-wrap">
          <span class="text-gray-500 mr-2 text-sm">热门：</span>
          <div class="flex flex-wrap gap-2">
            <button 
              v-for="tag in hotTags"
              :key="tag.name"
              @click="searchQuery = tag.name"
              class="text-sm text-gray-600 bg-gray-100 px-2 py-1 rounded-full hover:bg-gray-200 flex items-center"
            >
              {{ tag.name }}
              <span v-if="tag.hot" class="text-xs text-white bg-red-500 rounded-full px-1 ml-1">热</span>
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 筛选条件区域 -->
    <div class="bg-white mt-3 shadow-sm rounded">
      <div class="container mx-auto px-4 py-4">
        <TalentFilters @filter-change="handleFilterChange" />
      </div>
    </div>

    <!-- 排序和结果展示 -->
    <div class="container mx-auto px-4 mt-4">
      <div class="flex">
        <!-- 主内容区 -->
        <div class="flex-1 mr-4">
          <!-- 排序选项 -->
          <div class="bg-white rounded shadow-sm p-3 mb-4">
            <div class="flex items-center space-x-4">
              <span class="text-gray-500 text-sm">综合排序</span>
              <div class="flex items-center space-x-2">
                <button 
                  v-for="sort in sortOptions"
                  :key="sort.value"
                  @click="selectedSort = sort.value"
                  :class="[
                    'px-3 py-1 rounded-full text-sm',
                    selectedSort === sort.value 
                      ? 'bg-primary text-white' 
                      : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
                  ]"
                >
                  {{ sort.label }}
                </button>
              </div>
            </div>
          </div>

          <!-- 候选人列表 -->
          <div class="space-y-4">
            <CandidateCard 
              v-for="candidate in filteredCandidates"
              :key="candidate.id"
              :candidate="candidate"
              @view-detail="viewCandidateDetail"
            />
          </div>

          <!-- 分页 -->
          <div class="flex justify-center mt-8">
            <div class="flex items-center space-x-2">
              <button class="px-3 py-2 border border-gray-300 rounded text-gray-600 hover:bg-gray-50">
                <i class="ri-arrow-left-s-line"></i>
              </button>
              <button class="px-3 py-2 bg-primary text-white rounded">1</button>
              <button class="px-3 py-2 border border-gray-300 rounded text-gray-600 hover:bg-gray-50">2</button>
              <button class="px-3 py-2 border border-gray-300 rounded text-gray-600 hover:bg-gray-50">3</button>
              <button class="px-3 py-2 border border-gray-300 rounded text-gray-600 hover:bg-gray-50">
                <i class="ri-arrow-right-s-line"></i>
              </button>
            </div>
          </div>
        </div>

        <!-- 右侧边栏 -->
        <div class="w-64">
          <TalentSidebar />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import { useCandidatesStore } from '@/stores/candidates'
import CandidateCard from '@/components/CandidateCard.vue'
import TalentFilters from '@/components/TalentFilters.vue'
import TalentSidebar from '@/components/TalentSidebar.vue'

const router = useRouter()
const authStore = useAuthStore()
const candidatesStore = useCandidatesStore()

const searchQuery = ref('')
const selectedLocation = ref('')
const selectedSort = ref('active')

const hotTags = [
  { name: 'ai', hot: true },
  { name: '市场营销', hot: true },
  { name: '市场推广', hot: true },
  { name: '市场合伙人', hot: false },
  { name: '市场营销专业', hot: false },
  { name: '市场推广营销', hot: false },
  { name: 'ai市场推广', hot: false },
  { name: '市场营销策划', hot: false },
  { name: '区域市场营销', hot: false }
]

const sortOptions = [
  { label: '活跃优先', value: 'active' },
  { label: '匹配度优先', value: 'match' },
  { label: '过滤近14天看有', value: 'recent' },
  { label: '近30天未和同事交换简历', value: 'exclusive' }
]

const filteredCandidates = computed(() => {
  let candidates = candidatesStore.candidates
  
  if (searchQuery.value) {
    candidates = candidates.filter(candidate => 
      candidate.name.includes(searchQuery.value) ||
      candidate.currentPosition.includes(searchQuery.value) ||
      candidate.currentCompany.includes(searchQuery.value)
    )
  }
  
  if (selectedLocation.value) {
    candidates = candidates.filter(candidate => 
      candidate.currentLocation.includes(selectedLocation.value)
    )
  }
  
  return candidates
})

const performSearch = () => {
  candidatesStore.searchQuery = searchQuery.value
}

const handleFilterChange = (filters: any) => {
  candidatesStore.setFilters(filters)
}

const viewCandidateDetail = (candidateId: string) => {
  router.push(`/candidate/${candidateId}`)
}
</script>
